<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>文献资源管理系统-参数管理</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="文献资源管理系统-参数管理">
<meta name="description" content="文献资源管理系统-参数管理">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link href="icon/iconfont.css" rel="stylesheet">
</head>
  <style>
    .col-lg-12{
      margin: auto;
    top: 17px;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    }
    .left {
        width: 20%;
        height: 530px;
        border: 1px solid #ccc;
        float:left;
    }
    .right {
        width: 58%;
        height: 530px;
        border: 1px solid #ccc;
        float:left;
    }
    .el-scrollbar .el-scrollbar__wrap {
      overflow-x: hidden;
      }
  </style>
<body>
<div class="lyear-layout-web" id="app">
  <div class="lyear-layout-container">
    <!--左侧导航-->

    <!--End 左侧导航-->
    
    <!--头部信息-->
 
    <!--End 头部信息 <i class="mdi mdi-pencil"></i>  class="iconfont iconall"-->
    
    <!--页面主要内容-->

    <main class="lyear-layout-content" >
      <div class="content_wrap">
        <div class="left">
          <template>
          <el-scrollbar style="height:100%;"  v-loading="loading" element-loading-text="拼命加载中" >
              <div style="width:700px;height:700px;border:solid;" >
                    <el-tree 
					style="width: 40%"
                      :props="defaultProps"
                      :data="data"
                      node-key="id"
                      :default-expand-all="false"
                      :expand-on-click-node="false"
                      @node-click="handleNodeClick">
                    <span class="custom-tree-node" slot-scope="{node, data}">
                    
                    <span><i class="iconfont iconyezi" ></i>  {{node.label}}</span>
                    </span>
                  </el-tree>
            </div>
        </el-scrollbar>
      </template>
            <!--tree-->
        </div>
        <div class="right">
          <div class="card-header"><h4>编辑子节点</h4>
            <!-- <a class="btn btn-success m-r-5" type="warning"  style="float: right;"  data-toggle="modal" data-target="#myModal3"><i class="mdi mdi-pencil"></i> 编辑子节点</a> -->
          </div>
          <div class="card-body">
            <form action="lyear_forms_elements.html" method="post" onsubmit="return false;">
              <div class="form-group">
                <label for="example-nf-email">参数名称</label>
                <input class="form-control" type="email" id="example-nf-email" v-model="param.name"  placeholder="参数名称">
              </div>
              <div class="form-group">
                <label for="example-nf-email">编码</label>
                <input class="form-control" type="email" id="example-nf-email" v-model="param.code"  placeholder="编码">
              </div>
              <div class="form-group">
                <label for="example-nf-email">类型</label>
                <span v-if="param.type == 0">
                    期刊<input  type="radio" v-model="param.type" style="margin-left: 6px" checked  value="0">
                </span>
                <span v-if="param.type != 0">
                    期刊<input  type="radio" v-model="param.type" style="margin-left: 6px"   value="0">
                </span>
                <span v-if="param.type == 1">
                  非刊<input  type="radio" v-model="param.type" style="margin-left: 6px"  checked value="1">
                </span>
                <span v-if="param.type != 1">
                  非刊 <input  type="radio" v-model="param.type" style="margin-left: 6px"  value="1">
                </span>
              </div>
              <div class="form-group">
                <label for="example-nf-email">排序</label>
                <input class="form-control" type="email" id="example-nf-email" v-model="param.orderBy"  placeholder="排序">
              </div>
              <div class="form-group">
                <label for="example-nf-email">备注</label>
                <input class="form-control" type="email" id="example-nf-email" v-model="param.text"  placeholder="备注">
              </div>
              <div class="form-group">
                 
                <a class="btn btn-primary m-r-5" type="warning"  @click="paramupdate()"><i class="mdi mdi-check"></i> 保存</a>
                <a class="btn btn-danger" type="warning"  @click="paramdel()"><i class="mdi mdi-window-close"></i> 删除</a>
               </div>  
              
            </form>
            
          </div>
        </div>
     </div>
      
      
    </main>
    <!--End 页面主要内容-->
     <!-- 子节点编辑模态框（Modal） -->
   <!-- <form action=""  class="form-horizontal" role="form">
    <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">
                      子节点编辑
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                </div>
                <div class="modal-body" style="height: 100%;">
                      <div class="form-group">
                        <label for="lastname" class="col-sm-3 control-label">参数名称</label>
                        <div class="col-sm-7">
                          <input class="form-control" type="text"  v-model="param.name"  placeholder="参数名称">
                        </div>
                    </div>
                      <div class="form-group">
                        <label for="lastname" class="col-sm-3 control-label">编码</label>
                        <div class="col-sm-7">
                          <input class="form-control" type="text" v-model="param.code"  placeholder="编码">
                        </div>
                    </div>
                    
                    <div class="form-group">
                      <label for="lastname" class="col-sm-3 control-label">类型</label>
                      <div class="col-sm-7">
                        <span v-if="param.type == 0">
                          期刊<input  type="radio" v-model="param.type" style="margin-left: 6px" checked  value="0">
                      </span>
                      <span v-if="param.type != 0">
                          期刊<input  type="radio" v-model="param.type" style="margin-left: 6px"   value="0">
                      </span>
                      <span v-if="param.type == 1">
                        非刊<input  type="radio" v-model="param.type" style="margin-left: 6px"  checked value="1">
                      </span>
                      <span v-if="param.type != 1">
                        非刊 <input  type="radio" v-model="param.type" style="margin-left: 6px"  value="1">
                      </span>
                      </div>
                  </div>
                  <div class="form-group">
                    <label for="lastname" class="col-sm-3 control-label">排序</label>
                    <div class="col-sm-7">
                      <input class="form-control" type="text" v-model="param.orderBy"  placeholder="排序">
                    </div>
                </div>
                <div class="form-group">
                  <label for="lastname" class="col-sm-3 control-label">备注</label>
                  <div class="col-sm-7">
                    <input class="form-control" type="text" v-model="param.text"  placeholder="备注">
                  </div>
              </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <el-button id="button" data-dismiss="modal"  class="btn btn-primary" type="primary"  @click="paramupdate()" >提交</el-button>
                </div>
            </div>
        </div>
    </div>
  </form> -->
  </div>
</div>

<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>

<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>

<script src="https://cdn.bootcss.com/zTree.v3/3.5.40/js/jquery.ztree.core.min.js"></script>
<script src="https://cdn.bootcss.com/zTree.v3/3.5.40/js/jquery.ztree.excheck.min.js"></script>
<link href="https://cdn.bootcss.com/zTree.v3/3.5.40/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="module">

  new Vue({
  
          el:"#app",
          data() {
              return {
                  data: [],
                  param:{},
                  loading: false,
                  defaultProps: {
                      label: 'name'
                     
                  }
              }
          },
          created() {
              this.getlist();
  
          },
          methods: {
           
              getlist() {
                this.loading = true;
                setTimeout(() => {
                this.loading = false;
                axios.get("http://29n01o8660.oicp.vip/server/findparamtree").then(res => {

                     this.arraytotree(res.data);
                      
                  }).catch(res => {
  
                  })
                }, 2000);
              },
              handleNodeClick(data) {
                this.param = data;
                window.localStorage.setItem("id",this.param.id);
                console.log(data);
              },
              //数组转化为树
              arraytotree(arr) {
                console.log(arr)
               
                  var top = [], sub = [], tempObj = {};
                  
                  arr.forEach(function (item) {
                   
                      if (item.pId=="0") { // 顶级分类
                          top.push(item)
                          
                      } else {
                          sub.push(item) // 其他分类
                      }
                      item.children = []; // 默然添加children属性
                     
                       tempObj[item.id] = item // 用当前分类的id做key，存储在tempObj中
                     
                  })
  
                  sub.forEach(function (item) {
                    
                      // 取父级
                      var parent = tempObj[item.pId] || {'children': []}
                     
                      // 把当前分类加入到父级的children中
                      parent.children.push(item)
                      
                  })
                  //  alert(JSON.stringify(top))
                  this.data = top;
                  return top
                 
              },
              paramupdate(){
              this.paramid = window.localStorage.getItem("id");
              axios.post("http://29n01o8660.oicp.vip/server/paramupdate",this.param)
              .then(res => {
                this.loading = true;
                setTimeout(() => {
                this.loading = false;

                    this.$message({
                    message: '恭喜你，修改成功',
                    type: 'success'
                    });

                }, 2000);
                this.param={};
                this.getlist();
                console.log(res)
              })
              .catch(err => {
                console.error(err); 
              })
            },
            paramadd(){
              this.paramid = window.localStorage.getItem("id");
              axios.post("http://29n01o8660.oicp.vip/server/paramadd",this.param)
              .then(res => {
                this.loading = true;
                setTimeout(() => {
                this.loading = false;

                    this.$message({
                    message: '恭喜你，添加成功',
                    type: 'success'
                    });

                }, 2000);
                this.param={};
                this.getlist();
                console.log(res)
              })
              .catch(err => {
                console.error(err); 
              })
            },
            paramdel(){
              this.paramid = window.localStorage.getItem("id");
              axios.delete("http://29n01o8660.oicp.vip/server/paramdel/"+this.paramid)
              .then(res => {
                this.loading = true;
                setTimeout(() => {
                this.loading = false;
                    this.$message({
                    message: '恭喜你，删除成功',
                    type: 'success'
                    });

                  }, 2000);
                this.param={};
                this.getlist();
                console.log(res)
              })
              .catch(err => {
                console.error(err); 
              })
            }
          }
      })
    </script>
</body>
</html>